<template>
  <div style="min-width: 1600px;">
    <!-- 搜索筛选 -->
    <div class="centers">
      <!-- <el-card shadow="always" > -->
      <div class="tabs">
        <div
          @click="tabsCheck(index)"
          :class="currentTabsIndex == index ? 'activex' : ''"
          class="tabs-item"
          v-for="(item, index) in orderType"
          :key="index"
        >
          <span :class="index == 0 ? 'el-icon-s-order' : 'el-icon-date'"></span>
          {{ item }}
        </div>
      </div>
      <!-- </el-card> -->

      <div class="mt-center">
        <el-card style="margin:10px 0; padding:0">
          <el-form
            :inline="true"
            :model="pageparm"
            label-width="90px"
            class="user-search"
          >
            <el-form-item label="单号：">
              <el-input
                size="mini"
                v-model="pageparm.orderNo"
                placeholder="单号"
                @input="search"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="型号：">
              <el-input
                size="mini"
                v-model="pageparm.model"
                placeholder="型号"
                @input="search"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="是否检测：">
              <el-select
                style="width: 200px;"
                size="mini"
                v-model="pageparm.checkState"
                placeholder="请选择"
                @change="search"
              >
                <el-option label="全部" :value="0"></el-option>
                <el-option label="未检测" :value="1"></el-option>
                <el-option label="检测通过" :value="2"></el-option>
                <el-option label="检测不通过" :value="3"></el-option>
                <el-option label="检测存疑" :value="4"></el-option>
                <el-option label="待审核" :value="5"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-popconfirm
                confirm-button-text="导出"
                cancel-button-text="取消"
                @confirm="exportExcel()"
                icon="el-icon-info"
                icon-color="red"
                :title="
                  selectdata.length > 0
                    ? '是否导出当前勾选订单?'
                    : '是否要导出全部订单?'
                "
              >
                <el-button
                  v-if="$permission('ExportOrder')"
                  size="mini"
                  type="danger"
                  slot="reference"
                  icon="el-icon-upload2"
                  >导出</el-button
                >
                <!-- <el-button slot="reference">删除</el-button> -->
              </el-popconfirm>
              <el-button
                size="mini"
                v-if="currentTabsIndex == 1 && $permission('MonthlyCount')"
                type="warning"
                icon="el-icon-date"
                @click="calculation()"
                >计算</el-button
              >
              <el-button
                size="mini"
                v-if="currentTabsIndex == 1 && $permission('MonthlyCount')"
                type="info"
                icon="el-icon-sold-out"
                @click="settle()"
                >结清</el-button
              >
              <!-- <el-button
                size="mini"
                type="primary"
                icon="el-icon-search"
                @click="search"
                >搜索</el-button
              > -->
              <el-button size="mini" type="success" @click="clearInput()"
                >清空</el-button
              >
            </el-form-item>
            <el-collapse accordion>
              <el-collapse-item>
                <div>
                  <el-form-item label="委托方：">
                    <el-input
                      size="mini"
                      v-model="pageparm.client"
                      placeholder="委托方"
                      @input="search"
                      clearable
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="品牌：">
                    <el-input
                      size="mini"
                      v-model="pageparm.brandName"
                      placeholder="品牌"
                      @input="search"
                      clearable
                    ></el-input>
                  </el-form-item>

                  <el-form-item label="批次：">
                    <el-input
                      size="mini"
                      v-model="pageparm.batch"
                      placeholder="批次"
                      @input="search"
                      clearable
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="供应商：">
                    <el-input
                      size="mini"
                      v-model="pageparm.supplier"
                      placeholder="供应商"
                      @input="search"
                      clearable
                    ></el-input>
                  </el-form-item>

                  <el-form-item v-if="currentTabsIndex == 1" label="身份：">
                    <el-select
                      style="width: 200px;"
                      size="mini"
                      v-model="pageparm.roleId"
                      placeholder="请选择"
                      @change="search"
                    >
                      <el-option
                        v-for="item in userOptions"
                        :key="item.id"
                        :label="item.roleName"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="是否退款：">
                    <el-select
                      style="width: 200px;"
                      size="small"
                      v-model="pageparm.RefundState"
                      placeholder="请选择"
                      @change="search"
                    >
                      <el-option label="全部" :value="0"></el-option>
                      <el-option label="付款订单" :value="1"></el-option>
                      <el-option label="退款订单" :value="2"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="是否加急：">
                    <el-select
                      style="width: 200px;"
                      size="mini"
                      v-model="pageparm.urgentState"
                      placeholder="请选择"
                      @change="search"
                    >
                      <el-option label="全部" :value="0"></el-option>
                      <el-option label="加急" :value="2"></el-option>
                      <el-option label="不加急" :value="1"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item v-if="currentTabsIndex == 1" label="是否结清：">
                    <el-select
                      style="width: 200px;"
                      size="mini"
                      v-model="pageparm.payOffState"
                      placeholder="请选择"
                      @change="search"
                    >
                      <el-option label="全部" :value="0"></el-option>
                      <el-option label="已结清" :value="2"></el-option>
                      <el-option label="未结清" :value="1"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item v-if="currentTabsIndex == 0" label="支付方式：">
                    <el-select
                      style="width: 200px;"
                      size="mini"
                      v-model="pageparm.paymentMethod"
                      placeholder="请选择"
                      @change="search"
                    >
                      <el-option label="全部" :value="null"></el-option>
                      <el-option label="微信支付" :value="1"></el-option>
                      <el-option label="余额支付" :value="4"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="日期：">
                    <el-date-picker
                      size="mini"
                      v-model="valueTime"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="yyyy-MM-dd"
                      @change="search"
                    ></el-date-picker>
                  </el-form-item>
                </div>
              </el-collapse-item>
            </el-collapse>
          </el-form>
        </el-card>

        <!--列表-->
        <el-card shadow="always">
          <el-table
            id="printTest"
            :header-cell-style="{
              background: '#f3f6fa',
              color: '#555'
            }"
            :cell-style="timeStyle"
            @selection-change="selectChange"
            :row-key="getRowId"
            :data="userData"
            class="table"
            highlight-current-row
            v-loading="loading"
            size="mini"
            height="580"
            border
            element-loading-text="拼命加载中"
          >
            <el-table-column
              :reserve-selection="true"
              type="selection"
              width="50"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="orderNo"
              label="单号"
              min-width="70"
            >
              <template slot-scope="scope">
                <div class="orderNo">{{ scope.row.orderNo }}</div>
              </template>
            </el-table-column>
            <!-- 身份 -->
            <el-table-column
              show-overflow-tooltip
              prop="roleName"
              :label="currentTabsIndex == 0 ? '用户名' : '身份'"
              width="80"
            >
              <template slot-scope="scope">
                <div class="orderNo">
                  {{
                    currentTabsIndex == 0
                      ? scope.row.userName
                      : scope.row.roleName
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="client"
              label="委托方"
              width="120"
            ></el-table-column>

            <el-table-column
              show-overflow-tooltip
              prop="supplier"
              label="供应商"
              min-width="120"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="brandName"
              label="品牌"
              width="150"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="model"
              label="型号"
              width="150"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="batch"
              label="批次"
              min-width="70"
            ></el-table-column>

            <el-table-column
              show-overflow-tooltip
              prop="sCount"
              label="订单数量"
              width="70"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="total"
              label="金额"
              min-width="40"
            >
              <template slot-scope="scope">
                <span style="color: #e65353;">{{ scope.row.total }}</span>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              :prop="currentTabsIndex == 0 ? 'payTypeValue' : 'isPayOff'"
              :label="currentTabsIndex == 0 ? '支付方式' : '结清状态'"
              min-width="48"
            >
              <template slot-scope="scope">
                <span v-if="currentTabsIndex == 1">{{
                  scope.row.isPayOff ? "已结清" : "未结清"
                }}</span>
                <span v-else>{{ scope.row.payTypeValue }}</span>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="commodityId"
              label="检测项目"
              min-width="100"
            >
            </el-table-column>
            <!-- <el-table-column
              v-if="currentTabsIndex == 1"
              :key="Math.random()"
              align="center"
              prop=""
              label="结清状态"
              width="70"
            >
              <template slot-scope="scope">
                <span>{{ isPayOff ? "已结清" : "未结清" }}</span>
              </template>
            </el-table-column> -->
            <el-table-column prop="isLock" label="检测状态" width="90">
              <template slot-scope="scope">
                <div
                  style="display:flex;align-items:center"
                  v-if="scope.row.isCheckName"
                >
                  <el-image
                    v-if="scope.row.checkState === 2"
                    src="http://applet.atptest.com/vOGgC4cn1684908931232.png"
                    style="height:26px"
                    fit="cover"
                  ></el-image>

                  <el-image
                    v-if="scope.row.checkState === 3"
                    src="http://applet.atptest.com/lhnS4hLU1684908899393.png"
                    style="height:26px;"
                    fit="cover"
                  ></el-image>

                  <el-image
                    v-if="scope.row.checkState === 4"
                    src="http://applet.atptest.com/KgNkyrMQ1694575887815.png?v=1694575887890"
                    style="height:26px;"
                    fit="cover"
                  ></el-image>

                  <el-image
                    v-if="scope.row.checkState === 5"
                    src="	http://applet.atptest.com/qUo3egoR1694575959918.png?v=1694575960100"
                    style="height:26px;"
                    fit="cover"
                  ></el-image>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="isLock" label="预约时间段" width="90">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.reservationDate }}
                  {{ scope.row.reservationTime }}
                </div>
              </template>
            </el-table-column>
            <el-table-column width="150px" label="操作">
              <template slot-scope="scope">
                <div style="display: flex; align-items: center;">
                  <el-button
                    type="primary"
                    @click.native="viewDetail(scope.row)"
                    size="mini"
                    >详情</el-button
                  >
                  <el-button
                    v-show="scope.row.img.length > 0"
                    @click="viewPictures(scope.row)"
                    type="warning"
                    size="mini"
                  >
                    图片
                  </el-button>
                </div>
                <!-- <el-link v-show="scope.row.img.length == 0" disabled
                ><i class="el-icon--right"></i> 暂无图片</el-link
              >-->
              </template>
            </el-table-column>
            <!-- // 空数据状态的插槽 -->
            <template slot="empty">
              <el-empty
                style="height: 70vh;"
                :image-size="150"
                description="暂无数据"
              ></el-empty>
            </template>
          </el-table>
          <div style="display: flex">
            <div
              style="display: flex; align-items:center; justify-content:space-between; margin-top: 10px;"
            >
              <div>
                <span
                  style="color: rgb(196, 94, 94); font-weight: 700; font-size: 12px;"
                  >提示：</span
                >
                <span style="font-size: 12px;color: #888"
                  >红色背景代表加急订单!</span
                >
              </div>
              <div v-show="currentTabsIndex == 1">
                <span
                  style="color: rgb(196, 94, 94); font-weight: 700; font-size: 12px;"
                  >总金额：</span
                >
                <span style="font-size: 12px;color: #888">{{
                  currentTotalAmount || 0
                }}</span>
              </div>
            </div>
            <!-- 分页组件 -->
            <Pagination
              v-bind:child-msg="pageparm"
              @callFather="callFather"
            ></Pagination>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 查看详情 -->
    <el-dialog
      destroy-on-close
      :visible.sync="editFormVisible"
      width="1400px"
      top="100px"
      customWidth="isdialog"
      @click="closeDialog('edit')"
    >
      <div class="center-w">
        <div class="left-w">
          <div
            style="display: flex; justify-content: space-between; align-items: center;"
          >
            <div class="num">{{ detailInfo.orderNo }}</div>
            <div
              class="order_state wait"
              v-if="
                detailInfo.checkApprove == 0 &&
                  (detailInfo.checkName != userInfo.userName ||
                    userInfo.isAdministrator)
              "
              @click="review()"
            >
              <span>待审核</span>
            </div>
            <div class="order_state pass" v-if="detailInfo.checkApprove == 1">
              <span>审核通过</span>
            </div>
            <el-button
              size="small"
              v-if="$permission('OrderRefund')"
              type="danger"
              @click="refund"
              >退款</el-button
            >
            <el-button
              size="small"
              v-if="$permission('UpdateOrder')"
              type="primary"
              @click="updateSubmit"
              >编辑提交</el-button
            >
          </div>
          <div class="left-c" style="margin-top: 10px;">
            <div class="item">
              <div style="color: #444;" class="name">创建时间:</div>
              <div style="color:#999;" class="mess">
                {{ detailInfo.createTime }}
              </div>
            </div>
            <div class="item" v-if="detailInfo.checkApproveName">
              <div style="color: #444;" class="name">审核:</div>
              <div style="color:#999;" class="mess">
                {{ detailInfo.checkApproveName }}
                {{ detailInfo.checkApproveTime }}
              </div>
            </div>
          </div>
          <div class="left-c">
            <div class="item">
              <div class="name">采购单号:</div>
              <div class="mess">{{ detailInfo.purchaseOrderNo || "无" }}</div>
            </div>
            <div class="item">
              <div class="name">数量:</div>
              <div class="mess">{{ detailInfo.sCount }}</div>
            </div>
          </div>
          <div class="left-c">
            <div class="item">
              <div class="name">是否加急:</div>
              <div class="mess">{{ detailInfo.urgent }}</div>
            </div>
            <div class="item">
              <div class="name">报告:</div>
              <div class="mess">{{ detailInfo.cne || "无" }}</div>
            </div>
          </div>
          <!-- <div class="left-c">
            <div class="name">型号:</div>
            <div class="mess">{{ detailInfo.model }}</div>
          </div> -->
          <!-- <div class="left-c">
            <div class="name">检测数量:</div>
            <div class="mess">{{ detailInfo.count }}</div>
          </div> -->
          <div class="left-c">
            <div class="item">
              <div class="name">委托方:</div>
              <div class="mess">
                <el-input
                  clearable
                  size="mini"
                  placeholder="请输入委托方"
                  v-model="detailInfo.client"
                  :disabled="!$permission('UpdateOrder')"
                  style="width: 110% !important"
                ></el-input>
              </div>
            </div>
            <div class="item">
              <div class="name">供应商:</div>
              <div class="mess">
                <el-input
                  size="mini"
                  clearable
                  placeholder="请输入供应商"
                  v-model="detailInfo.supplier"
                  :disabled="!$permission('UpdateOrder')"
                  style="width: 110% !important;"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="left-c">
            <div class="item">
              <div class="name">型号:</div>
              <div class="mess">
                <el-input
                  size="mini"
                  clearable
                  placeholder="请输入"
                  v-model="detailInfo.model"
                  :disabled="!$permission('UpdateOrder')"
                  style="width: 110% !important;"
                ></el-input>
              </div>
            </div>

            <div class="item">
              <div class="name">批次:</div>
              <div class="mess">
                <el-input
                  size="mini"
                  clearable
                  placeholder="请输入批次"
                  v-model="detailInfo.batch"
                  :disabled="!$permission('UpdateOrder')"
                  style="width: 110% !important;"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="left-c">
            <div class="item">
              <div class="name">品牌:</div>
              <div class="mess">
                <el-input
                  size="mini"
                  clearable
                  placeholder="请输入品牌"
                  v-model="detailInfo.brandName"
                  :disabled="!$permission('UpdateOrder')"
                  style="width: 110% !important;"
                  @focus="getBrandName(detailInfo.brandName)"
                  @blur="brandFlag = false"
                  @input="getBrandName(detailInfo.brandName)"
                ></el-input>
                <div
                  class="brand_list"
                  v-if="brandFlag && brandOptions.length > 0"
                >
                  <div style="width:100%;height:100%;overflow: auto;">
                    <div
                      class="brand_item"
                      v-for="item in brandOptions"
                      :style="{
                        backgroundColor:
                          detailInfo.brandName == item.brandName
                            ? '#f5f7fa'
                            : '#fff'
                      }"
                    >
                      <div @mousedown="handleBrand(item.brandName)">
                        {{ item.brandName }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="item">
              <div class="name">封装:</div>
              <div class="mess">
                <el-input
                  size="mini"
                  clearable
                  placeholder="请输入"
                  v-model="detailInfo.packaging"
                  :disabled="!$permission('UpdateOrder')"
                  style="width: 110% !important;"
                  @focus="getPackageList(detailInfo.packaging)"
                  @blur="packageFlag = false"
                  @input="getPackageList(detailInfo.packaging)"
                ></el-input>
                <div
                  class="brand_list"
                  v-if="packageFlag && packageOptions.length > 0"
                >
                  <div style="width:100%;height:100%;overflow: auto;">
                    <div
                      class="brand_item"
                      v-for="item in packageOptions"
                      :style="{
                        backgroundColor:
                          detailInfo.packaging == item.packageName
                            ? '#f5f7fa'
                            : '#fff'
                      }"
                    >
                      <div @mousedown="handlePackage(item.packageName)">
                        {{ item.packageName }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="left-c">
            <div class="item">
              <div class="name">产地:</div>
              <div class="mess">
                <el-input
                  size="mini"
                  clearable
                  placeholder="请输入产地"
                  v-model="detailInfo.production"
                  :disabled="!$permission('UpdateOrder')"
                  style="width: 110% !important;"
                  @focus="getProductArea(detailInfo.production)"
                  @blur="areaFlag = false"
                  @input="getProductArea(detailInfo.production)"
                ></el-input>
                <div
                  class="brand_list"
                  v-if="areaFlag && areaOptions.length > 0"
                >
                  <div style="width:100%;height:100%;overflow: auto;">
                    <div
                      class="brand_item"
                      v-for="item in areaOptions"
                      :style="{
                        backgroundColor:
                          detailInfo.production == item.producerName
                            ? '#f5f7fa'
                            : '#fff'
                      }"
                    >
                      <div @mousedown="handleArea(item.producerName)">
                        {{ item.producerName }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="name">等级:</div>
              <div class="mess">
                <el-select
                  v-model="detailInfo.grade"
                  :disabled="!$permission('UpdateOrder')"
                  size="mini"
                  placeholder="请选择"
                  style="width: 110% !important;"
                >
                  <el-option
                    v-for="item in gradeOptions"
                    :key="item.gradeName"
                    :label="item.gradeName"
                    :value="item.gradeName"
                  />
                </el-select>
              </div>
            </div>
          </div>
          <div class="left-c">
            <div class="item">
              <div class="name">手机号:</div>
              <div class="mess">
                <el-input
                  size="mini"
                  clearable
                  placeholder="手机号"
                  v-model="detailInfo.userPhone"
                  disabled
                  style="width: 110% !important;"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="left-c">
            <div class="name">检测项目:</div>
            <div
              :title="detailInfo.commodityId"
              style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
              class="mess"
            >
              {{ detailInfo.commodityId }}
            </div>
          </div>
          <div class="left-c">
            <div class="name">备注:</div>
            <div
              class="mess"
              :title="detailInfo.remark"
              style="overflow:hidden;　text-overflow:ellipsis;white-space:nowrap;"
            >
              {{ detailInfo.remark || "无" }}
            </div>
          </div>
          <div class="left-c">
            <div class="item">
              <div class="name">数据手册:</div>
              <div style="padding-bottom: 7px; overflow: hidden;" class="mess">
                <upload-img
                  :multiple="true"
                  uploadType="text"
                  :isShowTip="false"
                  :limit="5"
                  :fileType="types"
                  :value="detailInfo.dataBook"
                  @input="uploadBookBack($event)"
                />
              </div>
            </div>
            <div class="item">
              <div class="name">检测报告:</div>
              <div style="padding-bottom: 7px; overflow: hidden;" class="mess">
                <upload-img
                  :multiple="true"
                  uploadType="text"
                  :isShowTip="false"
                  :limit="5"
                  :fileType="types"
                  :value="detailInfo.report"
                  @input="uploadReportBack($event)"
                />
              </div>
            </div>
          </div>
          <div class="left-c">
            <div class="item">
              <div class="name">支付方式:</div>
              <div class="mess">
                {{ detailInfo.payTypeValue }}
              </div>
            </div>
            <div class="item">
              <div class="name">优惠券:</div>
              <div class="mess">
                {{ detailInfo.list }}
              </div>
            </div>
          </div>
          <div class="left-c">
            <div class="item">
              <div class="name">优惠金额:</div>
              <div style="color: red;" class="mess">
                {{ detailInfo.disCountTotal + "元" }}
              </div>
            </div>
            <div class="item">
              <div class="name">金额:</div>
              <div style="color: red;" class="mess">
                {{ detailInfo.total + "元" }}
              </div>
            </div>
          </div>
          <div class="left-c">
            <div class="item">
              <div class="name">快递公司:</div>
              <div class="mess">{{ detailInfo.expressCompany }}</div>
            </div>
            <div class="item">
              <div class="name">运单号码:</div>
              <div class="mess">{{ detailInfo.returnWaybillNo }}</div>
            </div>
          </div>
          <div class="left-c">
            <div class="item">
              <div class="name">物流方式:</div>
              <div class="mess">{{ detailInfo.addressTypeValue }}</div>
            </div>
            <div class="item">
              <div class="name">预约时间:</div>
              <div class="mess">{{ detailInfo.reservationTime }}</div>
            </div>
          </div>
          <div class="left-c">
            <div class="item">
              <div class="name">联系人:</div>
              <div class="mess">
                <el-input
                  size="mini"
                  clearable
                  placeholder="请输入"
                  v-model="detailInfo.regularContacts"
                  :disabled="!$permission('UpdateOrder')"
                  style="width: 110% !important;"
                ></el-input>
              </div>
            </div>
            <div class="item">
              <div class="name">联系电话:</div>
              <div class="mess">
                <el-input
                  size="mini"
                  clearable
                  placeholder="请输入"
                  v-model="detailInfo.regularPhone"
                  :disabled="!$permission('UpdateOrder')"
                  style="width: 110% !important;"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="left-c">
            <div class="item">
              <div class="name">回寄地址:</div>
              <div class="mess">
                <el-input
                  size="mini"
                  clearable
                  placeholder="请输入"
                  v-model="detailInfo.regularAddress"
                  :disabled="!$permission('UpdateOrder')"
                  style="width: 260% !important;"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="left-c">
            <div class="item">
              <div class="name" style="min-width: 80px;">回寄运单号:</div>
              <div class="mess">
                <el-input
                  size="mini"
                  clearable
                  placeholder="请输入"
                  v-model="detailInfo.returnWaybillNo"
                  :disabled="!$permission('UpdateOrder')"
                  style="width: 100% !important;"
                ></el-input>
              </div>
            </div>
          </div>
          <!-- <div class="left-c">
            <div class="name">订单数量:</div>
            <div class="mess">{{ detailInfo.sCount }}</div>
          </div>
          <div class="left-c">
            <div class="name">检测数量:</div>
            <div class="mess">{{ detailInfo.count }}</div>
          </div> -->
          <!-- <div class="left-c" v-if="$permission('Confirm')">
            <div class="name">测评状态/人员:</div>
            <div class="mess">
              <el-select
                size="mini"
                style="width: 120px;"
                v-model="detailInfo.checkState"
                placeholder="是否通过"
                :disabled="detailInfo.isCheckName"
              >
                <el-option
                  v-for="item in optionsSelect"
                  :key="Number(item.value)"
                  :label="item.label"
                  :value="Number(item.value)"
                >
                </el-option>
              </el-select>
              <el-input
                size="mini"
                v-model="detailInfo.checkName"
                style="width: 70px !important;margin-right: 20px;"
                clearable
                placeholder="测评人员"
                type="text"
                :disabled="detailInfo.isCheckName"
              ></el-input>
              <el-switch
                size="mini"
                v-model="detailInfo.isCheckName"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="editTypeSwitch($event, detailInfo)"
                :disabled="detailInfo.isCheckName"
              ></el-switch>
              <span style="font-size:12px" v-if="detailInfo.isCheckName"
                >已测评</span
              >
              <span style="font-size:12px" v-else>未测评</span>
            </div>
          </div> -->

          <div class="left-c">
            <div class="name" style="border-right: none">在线鉴定图片:</div>
          </div>
          <div class="img-x">
            <el-image
              class="img-s"
              v-for="(img, x) in detailInfo.img"
              :key="x"
              :src="img"
              fit="cover"
              style="border: 1px solid #eee;"
              :preview-src-list="detailInfo.img"
              :initial-index="x"
            ></el-image>
            <el-empty
              style="width: 100%;"
              description="暂无图片！"
              v-if="detailInfo.img && detailInfo.img.length == 0"
              :image-size="200"
            ></el-empty>
          </div>
        </div>
        <div class="right-w">
          <div class="btns">
            <div
              v-for="(btn, ids) in btnList"
              :key="ids"
              :class="[
                currentIndex == ids ? 'active' : '',
                ids != btnList.length - 1 ? 'btn_item' : '',
                'item_basic'
              ]"
              @click="checkCurrentType(ids)"
            >
              {{ btn }}
            </div>
          </div>

          <!-- 检测结论 -->
          <div v-if="currentIndex == 0" class="conclusion">
            <div class="conclusion_item">
              <div class="item_title">检测结论</div>
              <div class="item_content">
                <div
                  class="item_li"
                  v-for="(item, index) in conclusionList"
                  :key="index"
                >
                  <div class="item_label" v-if="detailInfo.checkApprove != 1">
                    {{ item.value }}：
                  </div>
                  <div class="item_state" v-if="detailInfo.checkApprove != 1">
                    <el-radio v-model="item.state" label="检测已通过"
                      >检测已通过</el-radio
                    >
                    <el-radio v-model="item.state" label="检测未通过"
                      >检测未通过</el-radio
                    >
                    <el-radio v-model="item.state" label="进一步分析"
                      >进一步分析</el-radio
                    >
                  </div>
                  <div class="item_text" v-else>
                    {{ item.value }} {{ item.state }}
                  </div>
                </div>
              </div>
            </div>
            <div class="conclusion_item">
              <div class="item_title">判断说明</div>
              <div class="item_content">
                <div class="explain_li" v-if="detailInfo.checkApprove != 1">
                  <div class="sel_container">
                    <div
                      class="pass_li"
                      @click="judgeClick(0)"
                      :style="{
                        color:
                          currentJudgeFlag == 'pass' ? '#003CAF' : '#434343'
                      }"
                    >
                      通过判断说明
                    </div>
                    <div
                      class="fail_li"
                      @click="judgeClick(1)"
                      :style="{
                        color:
                          currentJudgeFlag == 'fail' ? '#003CAF' : '#434343'
                      }"
                    >
                      失败判断说明
                    </div>
                  </div>
                  <el-checkbox-group
                    v-model="checkDetermine"
                    @change="changeCheck"
                  >
                    <el-checkbox
                      :label="item.name"
                      v-for="item in explainList"
                      :key="item.name"
                      style="display:flex;align-items: center; margin: 15px 0;"
                    >
                      <div style="width: 550px;text-wrap: wrap;">
                        <span
                          :style="{
                            color:
                              item.name.indexOf('注：') != -1 ? 'red' : '#000'
                          }"
                          >{{ item.name }}</span
                        >
                      </div>
                    </el-checkbox>
                  </el-checkbox-group>
                  <el-checkbox-group
                    v-model="successDetermine"
                    @change="changeSuccess"
                    v-if="
                      currentJudgeIndex == 0 && detailInfo.checkApprove != 1
                    "
                  >
                    <el-checkbox
                      label="a"
                      style="display:flex;align-items: center; margin: 15px 0;"
                    >
                      <div
                        style="width: 600px;display: flex;align-items: center;"
                      >
                        <span>样品经过化学开盖，内部晶圆呈现</span>
                        <el-input
                          v-model="successValue1"
                          style="width: 100px !important;margin: 0 5px;"
                          placeholder="请输入"
                          size="mini"
                          :disabled="successFlag1"
                        ></el-input>
                        <span>模具标记，验证该部件是由</span>
                        <el-input
                          v-model="successValue2"
                          style="width: 100px !important;margin: 0 5px;"
                          placeholder="请输入"
                          size="mini"
                          :disabled="successFlag2"
                        ></el-input>
                        <span>制造的</span>
                      </div>
                    </el-checkbox>
                    <el-checkbox
                      label="b"
                      style="display:flex;align-items: center; margin: 15px 0;"
                    >
                      <div
                        style="width: 600px;display: flex;align-items: center;"
                      >
                        <el-input
                          v-model="successValue3"
                          placeholder="请输入"
                          size="mini"
                          style="width: 100% !important;"
                          :disabled="successFlag3"
                        ></el-input>
                      </div>
                    </el-checkbox>
                  </el-checkbox-group>
                  <el-checkbox-group
                    v-model="failDetermine"
                    @change="changeFail"
                    v-if="
                      currentJudgeIndex == 1 && detailInfo.checkApprove != 1
                    "
                  >
                    <el-checkbox
                      label="c"
                      style="display:flex;align-items: center; margin: 15px 0;"
                    >
                      <div
                        style="width: 600px;display: flex;align-items: center;"
                      >
                        <el-input
                          v-model="failValue"
                          placeholder="请输入"
                          size="mini"
                          style="width: 100% !important;"
                          :disabled="failFlag"
                        ></el-input>
                      </div>
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                <div class="explain_li" v-else>
                  <div
                    v-for="(item, index) in checkDetermine"
                    :key="index"
                    class="explain_content"
                  >
                    <span>{{ index + 1 }}、</span>
                    <span
                      :style="{
                        color: item.indexOf('注：') != -1 ? 'red' : '#000'
                      }"
                      >{{ item }}</span
                    >
                  </div>
                  <div
                    class="explain_content"
                    v-if="
                      this.detailInfo.checkJsonItem &&
                        this.detailInfo.checkJsonItem &&
                        this.detailInfo.checkJsonItem.successA &&
                        this.detailInfo.checkJsonItem.successB
                    "
                  >
                    <span>{{ checkDetermine.length + 1 }}、</span>
                    <span
                      >样品经过化学开盖，内部晶圆呈现{{
                        this.detailInfo.checkJsonItem.successA
                      }}模具标记，验证该部件是由{{
                        this.detailInfo.checkJsonItem.successB
                      }}制造的</span
                    >
                  </div>
                  <div
                    class="explain_content"
                    v-if="
                      this.detailInfo.checkJsonItem &&
                        this.detailInfo.checkJsonItem.successC
                    "
                  >
                    <span
                      v-if="
                        !this.detailInfo.checkJsonItem.successA &&
                          !this.detailInfo.checkJsonItem.successB
                      "
                      >{{ checkDetermine.length + 1 }}、</span
                    >
                    <span v-else>{{ checkDetermine.length + 2 }}、</span>
                    <span>{{ this.detailInfo.checkJsonItem.successC }}</span>
                  </div>
                  <div
                    class="explain_content"
                    v-if="
                      this.detailInfo.checkJsonItem &&
                        this.detailInfo.checkJsonItem.failA
                    "
                  >
                    <span
                      v-if="
                        !this.detailInfo.checkJsonItem.successA &&
                          !this.detailInfo.checkJsonItem.successB &&
                          !this.detailInfo.checkJsonItem.successC
                      "
                      >{{ checkDetermine.length + 1 }}、</span
                    >
                    <span
                      v-if="
                        (!this.detailInfo.checkJsonItem.successA &&
                          !this.detailInfo.checkJsonItem.successB &&
                          this.detailInfo.checkJsonItem.successC) ||
                          (this.detailInfo.checkJsonItem.successA &&
                            this.detailInfo.checkJsonItem.successB &&
                            !this.detailInfo.checkJsonItem.successC)
                      "
                      >{{ checkDetermine.length + 2 }}、</span
                    >
                    <span
                      v-if="
                        this.detailInfo.checkJsonItem.successA &&
                          this.detailInfo.checkJsonItem.successB &&
                          this.detailInfo.checkJsonItem.successC
                      "
                      >{{ checkDetermine.length + 3 }}、</span
                    >
                    <span>{{ this.detailInfo.checkJsonItem.failA }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="handle_container">
              <el-select
                v-model="detailInfo.checkState"
                placeholder="是否通过"
                size="mini"
                style="width: 128px;margin-left: 5px;"
                :disabled="detailInfo.checkApprove == 1"
              >
                <el-option
                  v-for="item in passOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-input
                placeholder=""
                v-model="detailInfo.checkName"
                :disabled="true"
                size="mini"
                style="width: 100px !important;margin-left: 5px;"
              >
              </el-input>

              <div
                class="conclusion_btn"
                v-if="detailInfo.checkApprove == null"
              >
                <el-popconfirm title="确定评测吗？" @confirm="updateCheck()">
                  <div slot="reference">待评测</div>
                </el-popconfirm>
              </div>

              <div
                class="conclusion_btn"
                style="background-color: #47AA3C;"
                v-if="detailInfo.checkApprove == 0"
              >
                <el-popconfirm title="确定评测吗？" @confirm="updateCheck()">
                  <div slot="reference">已评测</div>
                </el-popconfirm>
              </div>
              <div
                class="conclusion_btn"
                style="background-color: #71E2A3;cursor: default;"
                v-if="detailInfo.checkApprove == 1"
              >
                已评测
              </div>
            </div>
          </div>

          <!-- 上传图片 -->
          <div id="mess" ref="myDom" v-if="currentIndex == 1" class="seed">
            <!-- <el-input
              :rows="6"
              type="textarea"
              placeholder="请输入内容"
              v-model="paramsMess.context"
              maxlength="999"
              show-word-limit
            ></el-input> -->
            <el-button
              size="small"
              class="btn-add"
              @click="addType"
              type="primary"
              >添加分类</el-button
            >
            <!-- <el-button class="btn-add" @click="clearType" type="warning"
              >清空分类</el-button
            >-->
            <div v-for="(item, index) in paramsMess.newTypeData" :key="index">
              <div class="add-type">
                <div class="add-mess">
                  <div class="add-name">图片分类ID：</div>
                  <div>{{ index + 1 }}</div>
                </div>
                <div class="add-mess">
                  <div class="add-name">图片分类名：</div>
                  <div>
                    <el-input
                      size="small"
                      type="text"
                      placeholder="请输入图片分类名"
                      v-model="item.typeName"
                      maxlength="30"
                      :disabled="item.disabled"
                    ></el-input>
                  </div>
                </div>
                <div class="add-mess">
                  <div class="add-name">图片添加：</div>
                  <div>
                    <upload-img
                      :multiple="true"
                      :value="item.imgs"
                      @input="uploadImgBack($event, index)"
                    />
                  </div>
                </div>
                <div class="btn-del">
                  <el-button
                    class="btn-del"
                    size="small"
                    type="danger"
                    @click="deleteType(index)"
                    >删除分类</el-button
                  >
                </div>
              </div>
            </div>
            <el-button
              size="small"
              style="float: right;"
              :class="paramsMess.newTypeData == [] ? '' : 'istop'"
              type="success"
              :disabled="sendDisabled"
              @click="sendMessage"
              >立即发送</el-button
            >
          </div>

          <!-- 图片列表 -->
          <!-- <marquee style="background: #eee; color: red;" scrollamount="5"
            >消息可能有延迟，多刷新，常切换！！！</marquee
          > -->
          <div v-show="currentIndex == 2" class="list-center">
            <div
              v-for="(item, index) in messageList"
              :key="index"
              class="list-w"
            >
              <div class="list">
                <div class="date">
                  <div
                    style="background-color:#eee; height: 1px; flex: 28%;"
                  ></div>
                  <div
                    style="margin: 10px; color: rgba(16, 16, 16, 1);font-size: 18px"
                  >
                    {{ item.createTime }}
                  </div>
                  <div
                    style="background-color: #eee; height: 1px; flex: 28%;"
                  ></div>
                </div>
                <div
                  class="mess-list"
                  v-for="(it, inx) in item.list"
                  :key="inx"
                >
                  <el-image
                    class="head"
                    fit="cover"
                    :src="it.imgUrl"
                  ></el-image>
                  <div style="flex: 9;">
                    <div style="color: #000;">
                      {{ it.wxName }}
                      <span
                        style="margin-left: 10px; font-size: 12px; color: #888;"
                        >{{ it.createTimex }}</span
                      >
                      <span
                        v-if="$permission('DeleteMsg')"
                        @click="deleteMessage(it.id)"
                        style="float: right; font-size: 22px; margin-right: 10px; color: #ccc;cursor: pointer;"
                        class="el-icon-circle-close"
                      ></span>
                    </div>
                    <div style="margin-top: 5px;">
                      <div
                        :class="it.openid == paramsMess.openid ? 'actives' : ''"
                        style="margin-left: 30px; color: #13ce66; margin-bottom: 5px;"
                      >
                        {{ it.context }}
                      </div>
                      <div>
                        <div v-for="(el, xe) in it.newTypeData" :key="xe">
                          <div
                            style="font-weight: 500;color: #111; font-size: 13px; text-decoration:underline;"
                          >
                            {{ el.typeName }}
                          </div>
                          <!-- <div style="margin: 10px 0 10px 20px">
                            {{ el.typeText }}
                          </div>-->
                          <div
                            style="display: flex; align-items: center; flex-wrap: wrap;"
                          >
                            <div
                              class="img_item"
                              v-for="(x, z) in el.imgs"
                              :key="x.url"
                              :draggable="true"
                              @dragstart="dragstart(x)"
                              @dragenter="dragenter(x)"
                              @dragend="dragend(x, xe, inx, index)"
                            >
                              <el-image
                                style="width: 140px; height: 140px; margin: 10px; border: 1px solid #ccc;"
                                :preview-src-list="imgPrevList"
                                fit="cover"
                                :src="x.url"
                                :id="step(x.url)"
                              ></el-image>
                              <div class="img_flag" v-if="x.state == 1">
                                <i class="el-icon-check"></i>
                              </div>
                              <div class="img_handle">
                                <div class="full">
                                  <i
                                    class="el-icon-full-screen"
                                    @click="prevImg(x.url)"
                                  ></i>
                                </div>
                                <div class="img_select">
                                  <i
                                    class="el-icon-check"
                                    v-if="x.state == 0"
                                    @click="showImg(it.id, x.url, 1)"
                                  ></i>
                                  <i
                                    class="el-icon-close"
                                    v-if="x.state == 1"
                                    @click="showImg(it.id, x.url, 0)"
                                  ></i>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 大图预览 -->
            <el-image-viewer
              v-if="showViewer"
              :on-close="closeViewer"
              :initial-index="prevIndex"
              :url-list="imgPrevList"
              style="z-index: 9999 !important;"
            />

            <!--infinite-loading这个组件要放在列表的底部，滚动的盒子里面-->
            <loadings
              v-if="messageList && messageList.length > 0"
              spinner="spiral"
              @infinite="infiniteHandler"
              :distance="600"
              class="infinite-loading-wrap"
              ref="infiniteLoading"
            >
              <div slot="spinner">Loading...</div>
              <div slot="no-more">没有更多了</div>
              <div slot="no-results">没有更多了</div>
            </loadings>
            <el-empty
              style="width: 100%;"
              description="暂无历史消息！"
              v-if="messageList.length == 0"
              :image-size="200"
            ></el-empty>
          </div>
        </div>
      </div>
      <el-backtop
        v-if="detailInfo.isCheckName"
        target=".list-center"
      ></el-backtop>
      <div
        v-if="currentIndex == 0 && messageList.length > 0"
        class="el-icon-refresh refresh"
        :class="isRefresh ? 'isrefresh' : ''"
        @click="refresh"
      ></div>
    </el-dialog>

    <!--  查看图片  -->
    <el-dialog
      title="图片详情"
      :visible.sync="dataAccessshow"
      width="40%"
      @click="closeDialog('perm')"
    >
      <div class="see-img">
        <el-image
          class="img-w"
          center
          fit="cover"
          v-for="(it, index) in bigimgs"
          :key="index"
          :src="it"
          :preview-src-list="bigimgs"
          :initial-index="index"
        ></el-image>
      </div>
    </el-dialog>

    <!--  月结计算  -->
    <el-dialog
      title="月结计算"
      :visible.sync="calculationVisible"
      width="22%"
      @click="closeDialog('perm')"
    >
      <el-card class="calculation">
        <div style="display: flex;align-items: center; margin-bottom: 5px;">
          <span>时间选择：</span>
          <el-date-picker
            v-model="monthValue"
            :picker-options="setMonthDisabled"
            type="month"
            placeholder="选择月份"
            value-format="yyyy-MM"
            @change="closeTime($event)"
            >></el-date-picker
          >
          <el-button
            style="margin-left: 20px;"
            @click="calculatePrice"
            type="success"
            >计算</el-button
          >
        </div>
        <span
          style="color: #df7e7e; font-size: 10px;margin-left: 70px; display: block;"
          >提示：只能计算当前月份之前的某一个月！</span
        >
        <div v-for="(item, index) in priceList" :key="index">
          <span style="width: 70px;display: inline-block; margin: 15px 0;">
            {{ item.roleName + "：" }}
          </span>
          <el-tag type="danger">{{ item.price }}</el-tag>
        </div>
        <el-empty
          style="width: 100%;"
          description="无计算结果！"
          v-if="priceList.length == 0"
          :image-size="100"
        ></el-empty>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "../../components/Pagination";
import uploadImg from "../../components/uploadImg";
import ElImageViewer from "element-ui/packages/image/src/image-viewer";

import Vue from "vue";
import {
  getOrderList,
  updateCheckStatus,
  sendMessageOk,
  sendMessageList,
  updateOrderDetail,
  deleteMessageById,
  getMonthlySet,
  setOrderPayOff,
  getProductArea,
  updateCheckName,
  UpdateCheckApprove,
  OrderRefund,
  setMsg,
  GetOrderDetail,
  updateImgList
} from "../../api/order";
import { getPackageList } from "../../api/encapsulation";
import { getCheckConclusionList } from "../../api/desConfig";
import { friendlyFormatTime, judgeTime } from "../../utils/util";
import exportDataInExcel from "../../utils/exportExcel";
import loadings from "vue-infinite-loading"; //上拉加载更多的插件
import { getUserRoleList } from "../../api/user";
import { getBrandList } from "../../api/brand";
export default {
  data() {
    return {
      HEIGHT: 0,
      currentJudgeFlag: "pass",
      currentJudgeIndex: 0,
      successValue1: "",
      successValue2: "",
      successValue3: "",
      failValue: "",
      successFlag1: true,
      successFlag2: true,
      successFlag3: true,
      failFlag: true,
      successDetermine: [],
      failDetermine: [],
      showViewer: false,
      img_state: false,
      sendDisabled: false,
      orderState: "",
      userInfo: {},
      clickVal: "",
      moveVal: "",
      endVal: "",
      conclusionList: [],
      explainList: [],
      passOptions: [
        {
          value: 0,
          label: "检测未通过"
        },
        {
          value: 1,
          label: "检测已通过"
        },
        {
          value: 2,
          label: "进一步分析"
        }
      ],
      brandOptions: [],
      areaOptions: [],
      packageOptions: [],
      gradeOptions: [
        { gradeName: "MSL 1" },
        { gradeName: "MSL 2" },
        { gradeName: "MSL 2a" },
        { gradeName: "MSL 3" },
        { gradeName: "MSL 4" },
        { gradeName: "MSL 5" },
        { gradeName: "MSL 5a" },
        { gradeName: "MSL 6" }
      ],
      conclusion: {
        detection: "",
        judge: "",
        isPass: "",
        user: "检测员"
      },
      info: {},
      types: [
        "doc",
        "docx",
        "xlsx",
        "pptx",
        "pdf",
        "jpg",
        "png",
        "jpeg",
        "rar"
      ],
      brandFlag: false,
      areaFlag: false,
      packageFlag: false,
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      dataAccessshow: false, //控制图片的显示与隐藏
      unitAccessshow: false, //控制所属单位隐藏与显示
      bigImgVisible: false,
      currentDetailVisible: false,
      calculationVisible: false,
      bigImgVisibleMore: false,
      currentIndex: 0,
      currentTabsIndex: 0,
      currentDetailImg: "",
      monthValue: "",
      valueTime: "",
      textarea: "",
      isComment: false,
      btnList: ["检测结论", "上传图片", "图片列表"],
      orderType: ["普通订单", "月结订单"],
      optionsSelect: [
        {
          value: "1",
          label: "检测已通过"
        },
        {
          value: "0",
          label: "检测未通过"
        }
      ],
      currentImg: "", // 当前放大的图片
      // IMG: "../../../static/wx.jpg",
      // 选择数据
      selectdata: [],
      avatar: "",
      //图片列表
      messageList: [],
      prevIndex: 0,
      imgPrevList: [],
      userData: [],
      paramsMess: {
        openid: "",
        orderNo: "",
        context: "", //发送消息的内容
        newTypeData: [
          {
            typeName: "外观检测", //图片分类名
            imgs: [] // 上传的图片
          },
          {
            typeName: "接收货物信息",
            imgs: []
          },
          {
            typeName: "X-Ray透视",
            imgs: []
          },
          {
            typeName: "化学开封",
            imgs: []
          }
          // {
          //   typeName: "样品引脚检测", //图片分类名
          //   imgs: [] // 上传的图片
          // },
          // {
          //   typeName: "样品丙酮擦拭", //图片分类名
          //   imgs: [] // 上传的图片
          // },
          // {
          //   typeName: "样品刮擦测试", //图片分类名
          //   imgs: [] // 上传的图片
          // },
          // {
          //   typeName: "样品封装尺寸测量", //图片分类名
          //   imgs: [] // 上传的图片
          // }
        ]
      },
      fileList: [],
      // 选中
      checkmenu: [],
      //参数role
      bigimgs: [],
      detailInfo: {
        checkState: null
      },
      checkDetermine: [],
      // 分页参数
      pageparm: {
        brandName: "",
        model: "",
        batch: "",
        supplier: "",
        client: "",
        IsMonthly: false,
        // checkComment: null,
        orderNo: "",
        checkName: null,
        payOffState: 0,
        urgentState: 0,
        roleId: null,
        paymentMethod: null,
        checkState: 0,
        pageIndex: 1,
        size: 10,
        total: 0,
        bigIndex: null,
        startTime: "",
        endTime: "",
        RefundState: 1
      },
      currentTotalAmount: 0,
      // 消息列表下拉参数
      listObj: {
        pageIndex: 1,
        size: 10,
        orderNo: ""
      },
      //列表输入
      inputValue: "",
      isRefresh: false,
      currentData: [],
      priceList: [],
      userOptions: [],
      moreImg: "",
      deg: 0,
      bigIndex1: -1,
      bigIndex2: -1,
      bigIndex3: -1,
      bigIndex4: -1,
      bigIndex5: -1,
      imgList: [],
      setMonthDisabled: {
        disabledDate(time) {
          // 获取当前的月份信息
          const date = new Date(); // 获取当前的时间基本信息，值是这样的： Tue Jul 20 2021 14:59:43 GMT+0800 (中国标准时间)
          const year = date.getFullYear(); // 获取当前年份，值是这样的： 2021
          let month = date.getMonth() + 1; // 获取当前月份，值是这样的： 6   getMonth()方法返回值是0-11，也就是1月份到12月份，所以要加上1，才是当前月份
          if (month >= 1 && month <= 9) {
            // 如果是1月到9月就要在前面补上一个0   比如：02、07    月份这样表示
            month = "0" + month;
          }
          const nowDate = year.toString() + month.toString(); // 转换成字符串拼接，最终得到年和月，比如此时的时间是2021年7月20号，所以nowDate的值是：202107
          // 获取时间选择器的月份信息
          const timeyear = time.getFullYear(); // 获取时间选择器的年份（有很多）
          let timemonth = time.getMonth() + 1; // 与上面同理
          if (timemonth >= 1 && timemonth <= 9) {
            timemonth = "0" + timemonth;
          }
          const elTimeData = timeyear.toString() + timemonth.toString();
          // 返回，时间选择器的日期月份大于当前日期的月份，又因为disabledDate函数是控制月份禁用不可选
          // 所以，最终就是：时间选择器的月份大于当前的月份，就都禁用掉，所以就实现了最终效果：
          // 大于等于当前月份都不可选
          return elTimeData >= nowDate; // 这里虽然是字符串，但是弱类型语言js会做一个转换，是可以比较大小的如： '202107' > '202008'
        }
      }
    };
  },

  components: {
    Pagination,
    uploadImg, //上传图片
    loadings, // 上拉加载更多组件
    ElImageViewer // 大图预览
  },

  watch: {
    //监听获取聊天全部分类的数组
    messageList: {
      handler(newVal, oldVal) {
        newVal.forEach(el => {
          el.list.forEach(it => {
            it.newTypeData.forEach(jx => {
              this.imgList = [...this.imgList, ...jx.imgs];
            });
          });
        });
      },
      // deep: true
      immediate: false
    },
    //监测弹窗关闭刷新列表
    editFormVisible(value) {
      if (value == false) {
        this._getOrderList();
      }
    }
  },

  created() {
    this.info = JSON.parse(localStorage.getItem("info"));
    let isRole = !this.info.isAdministrator && this.info.auth.length == 0;
    if (isRole) {
      this.$router.push(`/error"}`);
    }
    this._getOrderList();
    this._getUserRoleList();
    this.paramsMess.openid = this.info.openid;
  },

  mounted() {
    if (!Vue.prototype.$permission("MonthlyOrder")) {
      this.orderType = ["普通订单"];
    }
    if (!Vue.prototype.$permission("SendMsg")) {
      this.btnList = ["图片列表"];
    }
  },
  computed: {
    colorObject: function() {
      switch (this.detailInfo.checkApprove) {
        case 0:
          return "wait";
        case 1:
          return "pass";
        default:
          return "def";
      }
    }
  },
  methods: {
    step(url) {
      return "scroll" + url;
    },

    //点击判断说明
    judgeClick(val) {
      if (val == 0) {
        this.currentJudgeFlag = "pass";
        this.currentJudgeIndex = 0;
        this.getCheckConclusionList(0);
      } else {
        this.currentJudgeFlag = "fail";
        this.currentJudgeIndex = 1;
        this.getCheckConclusionList(1);
      }
    },

    // 拖拽图片
    dragstart(x) {
      this.clickVal = x;
    },
    dragenter(x) {
      this.moveVal = x;
    },
    async dragend(x, xe, inx, index) {
      this.endVal = x;
      let i = this.messageList[index].list[inx].newTypeData[xe].imgs.indexOf(x); //移动元素的当前位置
      let moveObj = this.moveVal ? this.moveVal : "";
      let addIndex = this.messageList[index].list[inx].newTypeData[
        xe
      ].imgs.indexOf(moveObj); //要移动后的位置
      this.messageList[index].list[inx].newTypeData[xe].imgs.splice(i, 1);
      this.messageList[index].list[inx].newTypeData[xe].imgs.splice(
        addIndex,
        0,
        x
      );
      let req = {
        id: this.messageList[index].list[inx].id,
        NewTypeData: this.messageList[index].list[inx].newTypeData
      };
      const res = await updateImgList(req);
      if (res.code == 200) {
        this._sendMessageNowList();
      } else {
        this._sendMessageNowList();
      }
    },

    // 获取内容配置列表
    async getCheckConclusionList(val) {
      let res = await getCheckConclusionList({ state: val });
      if (res.data) {
        this.explainList = res.data;
      } else {
        this.explainList = [];
      }
    },

    changeCheck(val) {
      // console.log("选择", val);
    },

    changeSuccess(val) {
      if (val.length > 0 && val.indexOf("a") != -1) {
        this.successFlag1 = false;
        this.successFlag2 = false;
      } else {
        this.successFlag1 = true;
        this.successFlag2 = true;
        this.successValue1 = "";
        this.successValue2 = "";
      }
      if (val.length > 0 && val.indexOf("b") != -1) {
        this.successFlag3 = false;
      } else {
        this.successFlag3 = true;
        this.successValue3 = "";
      }
    },

    changeFail(val) {
      if (val.length > 0) {
        this.failFlag = false;
      } else {
        this.failFlag = true;
        this.failValue = "";
      }
    },

    //时间戳
    getTime(time) {
      return new Date(time).getTime();
    },

    // 查看详情
    async viewDetail(e) {
      this.editFormVisible = true;
      this.getCheckConclusionList(0);
      const res = await GetOrderDetail({ orderNo: e.orderNo });
      if (res.code == 200) {
        this.detailInfo = res.data;
      } else {
        this.$message.error("请求出错了~");
      }
      this.detailInfo.list = this.getTicket(this.detailInfo.list);
      this.listObj.orderNo = this.detailInfo.orderNo;
      // 详情接口有检测结论数据的话就取checkConclusion
      if (res.data.checkConclusion) {
        if (res.data.checkConclusion.indexOf(";") !== -1) {
          this.conclusionList = res.data.checkConclusion
            .split(";")
            .map(item => {
              return {
                value: item.split("#")[0],
                state: item.split("#")[1]
              };
            });
        } else {
          this.conclusionList = res.data.checkConclusion.split().map(item => {
            return {
              value: item.split("#")[0],
              state: item.split("#")[1]
            };
          });
        }
        this.conclusionList.forEach(item => {
          if (item.value.indexOf("【") == -1) {
            item.value = item.value.split("");
            item.value.splice(0, 0, "【");
            item.value = item.value.join("");
          }
          if (item.value.indexOf("】") == -1) {
            item.value = item.value.concat("】");
          }
        });
        // 未检测的状态就取检测项目commodityId的值
        if (this.detailInfo.checkApprove === null) {
          this.conclusionList = res.data.commodityId.split("+").map(item => {
            return {
              value: item
            };
          });
        }
        // let createTimeValue = Number(this.getTime(this.detailInfo.createTime));
        // let newCreateValue = Number(this.getTime("2023-11-22 15:00:00"));
        // 旧数据重新获取判断说明
        // if (
        //   this.detailInfo.checkApprove == 0 &&
        //   createTimeValue < newCreateValue
        // ) {
        //   this.conclusionList = res.data.commodityId.split("+").map(item => {
        //     return {
        //       value: item
        //     };
        //   });
        // }
      } else {
        // 没有的话就取检测项目commodityId的值
        this.conclusionList = res.data.commodityId.split("+").map(item => {
          return {
            value: item
          };
        });
      }
      // 详情接口有判断说明checkDetermine的话就取
      if (res.data.checkDetermine) {
        if (res.data.checkDetermine.indexOf("@@") != -1) {
          this.checkDetermine = res.data.checkDetermine
            .split("@@")
            .map(item => {
              return item;
            });
        } else {
          this.checkDetermine = res.data.checkDetermine.split().map(item => {
            return item;
          });
        }

        // if (this.detailInfo.checkApprove != 1) {
        //   let arr = [];
        //   for (let i = 0; i < this.checkDetermine.length; i++) {
        //     for (let j = 0; j < this.explainList.length; j++) {
        //       if (this.checkDetermine[i] == this.explainList[j].name) {
        //         arr.push(this.checkDetermine[i]);
        //       }
        //     }
        //   }
        //   this.checkDetermine = arr;
        // }
      } else {
        this.checkDetermine = [];
      }
      this.userInfo = JSON.parse(localStorage.getItem("info"));
      this.detailInfo.checkName = e.checkName
        ? e.checkName
        : this.userInfo.userName;
      this.successDetermine = [];
      this.failDetermine = [];
      this.successFlag1 = true;
      this.successFlag2 = true;
      this.successFlag3 = true;
      this.failFlag = true;
      this.successValue1 = "";
      this.successValue2 = "";
      this.successValue3 = "";
      this.failValue = "";
      this.currentJudgeFlag = "pass";
      if (this.detailInfo.checkJsonItem) {
        if (
          this.detailInfo.checkJsonItem.successA &&
          this.detailInfo.checkJsonItem.successB
        ) {
          this.successDetermine.push("a");
          this.successValue1 = this.detailInfo.checkJsonItem.successA;
          this.successValue2 = this.detailInfo.checkJsonItem.successB;
          this.successFlag1 = false;
          this.successFlag2 = false;
        }
        if (this.detailInfo.checkJsonItem.successC) {
          this.successDetermine.push("b");
          this.successValue3 = this.detailInfo.checkJsonItem.successC;
          this.successFlag3 = false;
        }
        if (this.detailInfo.checkJsonItem.failA) {
          this.failDetermine.push("c");
          this.failValue = this.detailInfo.checkJsonItem.failA;
          this.failFlag = false;
        }
      }
      this.restType();
      this._sendMessageNowList();
    },

    // 评测
    async updateCheck() {
      for (let i = 0; i < this.conclusionList.length; i++) {
        if (!this.conclusionList[i].state) {
          this.$message.error("检测结论未评测完毕");
          return;
        }
      }
      if (
        this.checkDetermine.length <= 0 &&
        this.successFlag1 &&
        this.successFlag2 &&
        this.successFlag3 &&
        this.failFlag
      ) {
        this.$message.error("判断说明不能为空");
        return;
      }
      let checkConclusionList = this.conclusionList.map(item => {
        return item.value + "#" + item.state;
      });
      let list = {
        orderNo: this.detailInfo.orderNo,
        checkName: this.detailInfo.checkName,
        checkState: this.detailInfo.checkState,
        checkConclusion: checkConclusionList.join(";"),
        checkDetermine: this.checkDetermine.join("@@"),
        checkJsonItem: {
          successA: this.successValue1,
          successB: this.successValue2,
          successC: this.successValue3,
          failA: this.failValue
        }
      };
      // return;
      if (this.detailInfo.checkState == null) {
        this.$message.error("请选择是否通过评测");
        return;
      }
      if (!this.successFlag1 && this.successValue1 == "") {
        this.$message.error("判断说明勾选项数据未填写完整");
        return;
      }
      if (!this.successFlag2 && this.successValue2 == "") {
        this.$message.error("判断说明勾选项数据未填写完整");
        return;
      }
      if (!this.successFlag3 && this.successValue3 == "") {
        this.$message.error("判断说明勾选项数据未填写完整");
        return;
      }
      if (!this.failFlag && this.failValue == "") {
        this.$message.error("判断说明勾选项数据未填写完整");
        return;
      }
      const res = await updateCheckName(list);
      if (res.data) {
        this.detailInfo.checkApprove = 0;
        this.$message.success("评测成功");
      }
    },

    // 获取品牌数据
    async getBrandName(value) {
      this.brandFlag = true;
      let list = {
        brandName: value
      };
      const res = await getBrandList(list);
      if (res.code == 200) {
        let { items } = res.data;
        this.brandOptions = items;
      }
    },

    // 获取产地列表
    async getProductArea() {
      this.areaFlag = true;
      let list = {
        ProducerName: this.detailInfo.production
      };
      const res = await getProductArea(list);
      if (res.code == 200) {
        let { items } = res.data;
        this.areaOptions = items;
      }
    },

    // 获取封装
    async getPackageList() {
      this.packageFlag = true;
      let list = {
        name: this.detailInfo.packaging,
        pageIndex: 1,
        pageSize: 10,
        orderBy: null
      };
      const res = await getPackageList(list);
      if (res.code == 200 && res.data) {
        let { items } = res.data;
        this.packageOptions = items;
      } else {
        this.packageOptions = [];
      }
    },

    // 打开查看器
    prevImg(val) {
      this.showViewer = true;
      for (let i = 0; i < this.imgPrevList.length; i++) {
        if (this.imgPrevList[i] == val) {
          this.prevIndex = i;
        }
      }
    },

    //展示图片
    async showImg(id, url, state) {
      let reqList = {
        id: id,
        url: url,
        state: state
      };
      const res = await setMsg(reqList);
      if (res.code == 200) {
        this._sendMessageNowList();
        setTimeout(() => {
          var el = document.getElementById(`scroll${url}`);
          el.scrollIntoView({
            behavior: "auto",
            block: "center",
            inline: "nearest"
          });
        }, 100);
      }
    },

    // 关闭查看器
    closeViewer() {
      this.showViewer = false;
    },

    // 获取身份列表
    async _getUserRoleList() {
      let res = await getUserRoleList();
      if (res.data) {
        this.userOptions = res.data;
      }
    },

    // 月结 结清
    async settle() {
      if (this.selectdata.length == 0) {
        this.$message.error("请选择要结清的月结订单");
        return;
      }
      let orderIds = this.selectdata.map(v => {
        return v.orderId;
      });
      let ids = orderIds.join(",");
      let result = await setOrderPayOff({ orderIds: ids });
      if (result.code == 200) {
        this.$message.success("结清成功");
        this._getOrderList();
      }
    },

    // 数据手册跳转
    openBook() {
      if (!this.detailInfo.dataBook) {
        this.$message({
          type: "error",
          message: "请输入跳转链接!"
        });
        return;
      }
      window.open(this.detailInfo.dataBook);
    },

    timeStyle(column) {
      if (
        column.columnIndex >= 1 &&
        column.columnIndex < 11 &&
        column.row.urgent == "是"
      ) {
        return "background: rgb(247, 195, 195)";
        // return "background: #eee";
      }
      if (column.columnIndex == 1 && column.row.isPayOff == false) {
        // return "background-image: url('http://applet.atptest.com/Ynuerhse1684894146291.png');  background-repeat:no-repeat;background-position:center;background-attachment:fixed)";
        // return "background: #eee";
      }
      return "";
    },

    // 计算一个月的月结钱
    async calculatePrice() {
      if (!this.monthValue) {
        this.$message.warning("请选择月份");
        return;
      }
      let result = await getMonthlySet({ datetime: this.monthValue });
      if (result.data) {
        this.priceList = result.data;
      } else {
        this.$message.error(`${this.monthValue} 当月没有已检测的月结订单！`);
        this.priceList = [];
      }
    },

    //清空计算时间
    closeTime(value) {
      if (value == null) {
        this.monthValue = "";
        this.priceList = [];
      }
    },

    // 月结结算弹窗
    calculation() {
      this.calculationVisible = true;
    },

    //tabs 切换
    tabsCheck(r) {
      this.currentTabsIndex = r;
      this.pageparm.IsMonthly = r == 0 ? false : true;
      this.pageparm.pageIndex = 1;
      this.clearInput();
    },

    // row-key绑定的必须为唯一值
    getRowId(row) {
      return row.orderId;
    },

    //删除当前一条聊天记录 当前只删除自己发的信息。
    deleteMessage(id) {
      this.$confirm(
        "确定删除此条消息记录吗？删除之后将无法还原！",
        "确认信息",
        {
          distinguishCancelAndClose: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        }
      )
        .then(() => {
          deleteMessageById(id).then(res => {
            if (res.code == 200) {
              this.$message.success("删除成功");
              this._sendMessageNowList();
            } else {
              this.$message.error("删除失败");
            }
          });
        })
        .catch(action => {
          this.$message.info("取消删除");
        });
    },

    // 详情编辑
    async updateSubmit() {
      const {
        orderNo,
        brandName,
        batch,
        supplier,
        production,
        dataBook,
        client,
        report,
        model,
        returnWaybillNo,
        packaging,
        size,
        grade,
        regularAddress,
        regularContacts,
        regularPhone
      } = this.detailInfo;
      let data = {
        orderNo: orderNo,
        brandName: brandName,
        batch: batch,
        supplier: supplier,
        production: production,
        dataBook: dataBook,
        client: client,
        model: model,
        report: report,
        returnWaybillNo: returnWaybillNo,
        packaging: packaging,
        size: size,
        grade: grade,
        regularAddress: regularAddress,
        regularContacts: regularContacts,
        regularPhone: regularPhone
      };
      let res = await updateOrderDetail(data);
      if (res.code == 200) {
        this.$message.success("编辑成功");
        this._getOrderList();
      } else {
        this.$message.error("编辑失败");
      }
    },

    //待审核
    review() {
      for (let i = 0; i < this.conclusionList.length; i++) {
        if (!this.conclusionList[i].state) {
          this.$message.error("检测结论未评测完毕");
          return;
        }
      }
      if (
        this.checkDetermine.length <= 0 &&
        this.successFlag1 &&
        this.successFlag2 &&
        this.successFlag3 &&
        this.failFlag
      ) {
        this.$message.error("判断说明不能为空");
        return;
      }
      if (!this.successFlag1 && this.successValue1 == "") {
        this.$message.error("判断说明勾选项数据未填写完整");
        return;
      }
      if (!this.successFlag2 && this.successValue2 == "") {
        this.$message.error("判断说明勾选项数据未填写完整");
        return;
      }
      if (!this.successFlag3 && this.successValue3 == "") {
        this.$message.error("判断说明勾选项数据未填写完整");
        return;
      }
      if (!this.failFlag && this.failValue == "") {
        this.$message.error("判断说明勾选项数据未填写完整");
        return;
      }
      this.$confirm("确定审核通过吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        // 调用审核接口
        UpdateCheckApprove({
          orderNo: this.detailInfo.orderNo,
          name: this.userInfo.userName
        }).then(res => {
          if (res.data) {
            this.$message.success("审核成功！");
            this.detailInfo.checkApprove = 1;
            this.editFormVisible = false;
            this._getOrderList();
          } else {
            this.$message.error(res.message);
          }
        });
      });
    },

    // 退款
    refund() {
      this.$confirm("确定退款吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        // 调用退款接口
        OrderRefund({
          orderNo: this.detailInfo.orderNo
        }).then(res => {
          if (res.data) {
            this.$message.success("退款成功");
            this._getOrderList();
            this.editFormVisible = false;
          } else {
            this.$message.success(res.message);
          }
        });
      });
    },

    // 刷新
    refresh() {
      if (this.isRefresh) {
        return this.$message.warning("点击太快了");
      }
      this.isRefresh = true;
      this._sendMessageNowList("isRefresh");
    },

    //获取订单列表
    async _getOrderList() {
      let res = await getOrderList(this.pageparm);
      if (res.code == 200 && res.data) {
        const { items, totalCount, totalAmount } = res.data;
        this.userData = items;
        this.userData.forEach(item => {
          item.reservationDate = item.reservationDate
            ? this.reservationDateText(item.reservationDate.toString())
            : "";
        });
        this.pageparm.total = totalCount;
        this.currentTotalAmount = totalAmount;
      } else {
        this.userData = [];
      }
    },

    // 预约时间显示转换
    reservationDateText(val) {
      return val.slice(0, 4) + "/" + val.slice(4, 6) + "/" + val.slice(6, 8);
    },

    // 全部清空
    clearInput() {
      this.valueTime = "";
      this.pageparm = {
        brandName: "",
        model: "",
        batch: "",
        supplier: "",
        client: "",
        orderNo: "",
        endTime: "",
        startTime: "",
        payOffState: 0,
        urgentState: 0,
        roleId: null,
        paymentMethod: null,
        checkState: 0,
        checkName: null,
        IsMonthly: this.pageparm.IsMonthly,
        // checkComment: null,
        pageIndex: 1,
        RefundState: 1,
        size: 10,
        total: 0
      };
      this._getOrderList();
      this.selectdata = [];
    },

    // 上传图片的回调
    uploadImgBack(x, e) {
      let a = x.map(v => {
        return { url: v.url, state: 0 };
      });
      this.paramsMess.newTypeData[e].imgs = a;
    },

    // 上传数据手册 回调
    uploadBookBack(b) {
      let a = b.map(v => {
        return v.url;
      });
      this.detailInfo.dataBook = a;
    },

    //上传数据报告
    uploadReportBack(b) {
      let a = b.map(v => {
        return v.url;
      });
      this.detailInfo.report = a;
    },

    // 查看图片
    viewPictures(e) {
      this.dataAccessshow = true;
      this.bigimgs = e.img;
    },

    // 上拉触底触发
    infiniteHandler($state) {
      this.listObj.pageIndex++;
      sendMessageList(this.listObj).then(res => {
        if (res.data && res.data.items.length) {
          this.currentData = this.currentData.concat(res.data.items);
          this.messageList = this.dataResort(this.currentData);
          this.messageList.forEach(el => {
            el.createTime = judgeTime(el.createTimes);
            el.list.forEach(it => {
              it.createTimex = friendlyFormatTime(it.createTime);
            });
          });
          $state.loaded();
        } else {
          if (this.$refs.InfiniteLoading) {
            this.$refs.InfiniteLoading.stateChanger.reset();
          }
          $state.complete();
        }
      });
    },

    //选择品牌
    handleBrand(value) {
      this.detailInfo.brandName = value;
      this.brandFlag = false;
    },

    //选择产地
    handleArea(value) {
      this.detailInfo.production = value;
      this.areaFlag = false;
    },

    //选择封装
    handlePackage(value) {
      this.detailInfo.packaging = value;
      this.packageFlag = false;
    },

    // 更新列表数据
    _sendMessageNowList(e) {
      this.messageList = [];
      this.currentData = [];
      this.listObj.pageIndex = 1;
      sendMessageList(this.listObj).then(res => {
        if (res.data) {
          this.currentData = res.data.items;
          this.messageList = this.dataResort(res.data.items);
          let list = [];
          for (let i = 0; i < this.messageList.length; i++) {
            for (let j = 0; j < this.messageList[i].list.length; j++) {
              for (
                let k = 0;
                k < this.messageList[i].list[j].newTypeData.length;
                k++
              ) {
                for (
                  let m = 0;
                  m < this.messageList[i].list[j].newTypeData[k].imgs.length;
                  m++
                ) {
                  list.push(
                    this.messageList[i].list[j].newTypeData[k].imgs[m].url
                  );
                }
              }
            }
          }
          //预览图片列表
          this.imgPrevList = list;
          this.messageList.forEach(el => {
            el.createTime = judgeTime(el.createTimes);
            el.list.forEach(it => {
              it.createTimex = friendlyFormatTime(it.createTime);
            });
          });
          if (e) {
            setTimeout(() => {
              this.$message.success("刷新成功");
              this.isRefresh = false;
            }, 1000);
          }
        } else {
          this.messageList = [];
        }
      });
    },

    // 优惠券转换
    getTicket(sortData) {
      if (sortData && sortData.length > 0) {
        let sorted = this.groupBy(sortData, item => {
          return item.item2; // 返回需要分组的对象
        });
        let str = "";
        for (let i = 0; i < sorted.length; i++) {
          str +=
            sorted[i][0].item2 +
            "*" +
            sorted[i].length +
            (i != sorted.length - 1 ? "、" : "");
        }
        return str;
      } else {
        return "无";
      }
    },
    groupBy(array, f) {
      let groups = {};
      array.forEach(o => {
        let group = JSON.stringify(f(o));
        groups[group] = groups[group] || [];
        groups[group].push(o);
      });
      return Object.keys(groups).map(group => {
        return groups[group];
      });
    },

    dataResort(data) {
      // 定义空数组，用于存储新组装的数据
      let newArr = [];
      // 遍历数组
      data.forEach((item, i) => {
        // 默认当前操作的数据下标 -1
        let index = -1;
        // 判断数组中是否已经存在当前遍历数据的时间
        let isExists = newArr.some((newItem, j) => {
          if (
            item.createTime.substring(0, 10) ==
            newItem.createTime.substring(0, 10)
          ) {
            // 存在就保存当前数据下标  用于插入数据
            index = j;
            return true;
          }
        });
        // 如果没有就存储一条新对象数据
        if (!isExists) {
          newArr.push({
            createTime: item.createTime.substring(0, 10),
            createTimes: item.createTime,
            list: [item]
          });
        } else {
          // 如果有就插入到已存在的对象中
          newArr[index].list.push(item);
        }
      });
      // 返回新数组
      return newArr;
    },

    // 点击查看详情的消息切换按钮
    checkCurrentType(e) {
      this.currentIndex = e;
      if (e == 2) {
        this._sendMessageNowList();
      }
      this.paramsMess.context = "";
      this.currentData = [];
      this.messageList = [];
    },

    //添加分类
    addType() {
      this.paramsMess.newTypeData.push({
        typeName: "", //图片分类名
        imgs: [] // 上传的图片
      });
    },

    // 清空所有分类
    clearType() {
      this.paramsMess.newTypeData = [];
    },

    // 删除分类
    deleteType(index) {
      this.paramsMess.newTypeData.splice(index, 1);
    },

    // 分页插件事件
    callFather(parm) {
      this.pageparm.pageIndex = parm.pageIndex;
      this.pageparm.size = parm.size;
      this._getOrderList();
    },

    //搜索事件
    search() {
      if (this.valueTime) {
        this.pageparm.startTime = this.valueTime[0];
        this.pageparm.endTime = this.valueTime[1];
      } else {
        this.pageparm.startTime = "";
        this.pageparm.endTime = "";
      }
      this.pageparm.pageIndex = 1;
      this._getOrderList();
    },

    //开关确认状态
    editTypeSwitch(e, r) {
      if (r.checkState === "" || r.checkState === null) {
        this.detailInfo.isCheckName = !this.detailInfo.isCheckName;
        return this.$message.warning("请选择订单的检查状态！");
      }
      if (!r.checkName) {
        this.detailInfo.isCheckName = !this.detailInfo.isCheckName;
        return this.$message.warning("请填写测评人员之后在进行确认状态！！！");
      }
      this.$confirm(
        "打开之后将不能关闭，测评人员将不可修改！！！",
        "确认信息",
        {
          distinguishCancelAndClose: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        }
      )
        .then(() => {
          let params = {
            orderNo: r.orderNo,
            checkName: r.checkName,
            checkState: r.checkState
          };
          updateCheckStatus(params).then(res => {
            if (res.code == 200) {
              this.detailInfo.isCheckName = this.detailInfo.isCheckName;
              this.$message.success("切换成功");
            } else {
              this.$message.success("切换失败");
            }
          });
        })
        .catch(action => {
          this.detailInfo.isCheckName = !this.detailInfo.isCheckName;
          this.$message.info("取消切换");
        });
    },

    // 重置初始化默认分类
    restType() {
      this.paramsMess.newTypeData = [
        {
          typeName: "外观检测", //图片分类名
          imgs: [] // 上传的图片
        },
        {
          typeName: "接收货物信息",
          imgs: []
        },
        {
          typeName: "X-Ray透视",
          imgs: []
        },
        {
          typeName: "化学开封",
          imgs: []
        }
        // {
        //   typeName: "样品引脚检测",
        //   imgs: []
        // },
        // {
        //   typeName: "样品丙酮擦拭",
        //   imgs: []
        // },
        // {
        //   typeName: "样品刮擦测试",
        //   imgs: []
        // },
        // {
        //   typeName: "样品封装尺寸测量",
        //   imgs: []
        // }
      ];
    },

    //立即发送消息
    sendMessage() {
      if (this.paramsMess.openid == null) {
        return this.$message.error("当前用户没有openid，不能上传图片！");
      }
      if (this.paramsMess.newTypeData.length == 0) {
        return this.$message.error("没有添加分类时，图片不能为空！！！");
      }
      if (
        this.paramsMess.newTypeData &&
        this.paramsMess.newTypeData.length > 0
      ) {
        let X = this.paramsMess.newTypeData.find(v => {
          return v.typeName == "";
        });
        let Z = this.paramsMess.newTypeData.find(v => {
          return v.imgs.length == 0;
        });

        if (X) {
          return this.$message.error("图片分类名不能为空！！！");
        } else if (Z) {
          return this.$message.error("分类中上传图片不能为空！！！");
        }
      }
      this.paramsMess.orderNo = this.detailInfo.orderNo;
      if (this.paramsMess.newTypeData.length == 0) {
        this.paramsMess.newTypeData = null;
      }
      this.sendDisabled = true;
      sendMessageOk(this.paramsMess).then(res => {
        if (res.code == 200) {
          this.sendDisabled = false;
          this.$message.success("上传成功！");
          this.restType();
          this.currentIndex = 0;
          this._sendMessageNowList();
        } else {
          this.$message.error(`上传失败`);
          this.sendDisabled = false;
        }
      });
    },

    //导出
    exportExcel() {
      //需要导出字段的名字
      let arrName = [
        "创建时间(测试日期)",
        "单号(订单/报告编号)",
        "委托方",
        "供应商",
        "品牌(生产厂家)",
        "型号",
        "批次",
        "产地",
        "检测数量",
        "检查项目",
        "测评人员(操作者)",
        "金额(测试费用)",
        "备注"
        // "图片"
      ];
      //需要导出字段的名字表格的对应的列宽
      let columnWidth = [30, 20, 20, 30, 20, 20, 10, 15, 20, 40, 20, 20, 40];
      if (this.currentTabsIndex == 1) {
        // 月结订单插入 采购单号这一项数据title
        arrName.splice(1, 0, "采购单号");
        columnWidth.splice(1, 0, 20);
      }
      //表格的名字
      const name = "订单列表";
      //获取你需要导出的固定字段名字和值
      let flag = this.selectdata.length > 0 ? true : false;
      if (!flag) {
        // 如果没有选中订单 默认全部导出
        this.pageparm.size = 999;
        getOrderList(this.pageparm).then(res => {
          this.userData = res.data ? res.data.items : [];
        });
      }
      if (this.userData.length == 0) {
        return this.$message.warning("没有可导出的订单!");
      }
      let list = [];
      let currentList = flag ? this.selectdata : this.userData;
      //找出对应需要的字段传到公共导出方法里面
      currentList.forEach(el => {
        if (this.currentTabsIndex == 1) {
          // 导出月结订单
          list.push({
            createTime: el.createTime,
            purchaseOrderNo: el.purchaseOrderNo,
            orderNo: el.orderNo,
            client: el.client,
            supplier: el.supplier,
            brandName: el.brandName,
            model: el.model,
            batch: el.batch,
            production: el.production,
            count: el.count,
            commodityId: el.commodityId,
            checkName: el.checkName,
            total: el.total,
            remark: el.remark
          });
        } else {
          //导出普通订单
          list.push({
            createTime: el.createTime,
            orderNo: el.orderNo,
            client: el.client,
            supplier: el.supplier,
            brandName: el.brandName,
            model: el.model,
            batch: el.batch,
            production: el.production,
            count: el.count,
            commodityId: el.commodityId,
            checkName: el.checkName,
            total: el.total,
            remark: el.remark
          });
        }
      });

      //导出传入公共方法
      exportDataInExcel(list, name, columnWidth, arrName);
    },

    // 选择复选框事件
    selectChange(val) {
      this.selectdata = val;
    },

    // 关闭编辑、增加弹出框
    closeDialog(dialog) {
      this.currentData = [];
      this.messageList = [];
      if (dialog == "edit") {
        this.editFormVisible = false;
      } else if (dialog == "perm") {
        this.dataAccessshow = false;
      } else if (dialog == "unit") {
        this.unitAccessshow = false;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.img_item {
  position: relative;
  .img_handle {
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 999;
    background-color: #ddd;
    opacity: 0.8;
    font-size: 17px;
    color: #000;
    .full {
      cursor: pointer;
    }
    .img_select {
      margin-left: 30px;
      cursor: pointer;
    }
  }
  .img_flag {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 12px solid #13ce66;
    border-right: 12px solid #13ce66;
    border-bottom: 12px solid transparent;
    border-left: 12px solid transparent;
    display: flex;
    justify-content: left;
    align-items: center;
    font-size: 10px;
    color: #fff;
  }
}
.img_item:hover {
  .img_handle {
    display: flex;
    justify-content: center;
  }
}
.full:hover {
  i {
    background-color: #fff;
  }
}

.img_select:hover {
  i {
    background-color: #fff;
    border-radius: 50%;
  }
}

.tabs {
  display: flex;
  align-items: center;

  /* background-color: #fff; */
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

/deep/.el-table .warning-row {
  background: rgb(247, 195, 195) !important;
}

.activex {
  color: #409eff;
  border: 1.5px solid #409eff !important;
}
.el-form-item {
  margin-bottom: 5px;
}

.tabs-item {
  border: 1px solid #eee;
  height: 40px !important;
  width: 100px;
  line-height: 40px;
  font-size: 15px;
  font-weight: 700;
  /* margin: 0 50px; */
  text-align: center;
}

.tabs-item:hover {
  /* color: #299656; */
  border: 1px solid #409eff;
}

.el-input {
  width: 200px !important;
}

.userRole {
  width: 100%;
}

.see-img {
  overflow-y: scroll;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  height: 500px !important;
}

/deep/ .el-collapse-item__content {
  padding-bottom: 0 !important;
  border: #fff !important;
}

/deep/.el-collapse-item__header {
  height: 0px !important;
  border-bottom: #fff !important;
}

/deep/ .el-collapse {
  border-bottom: #fff !important;
  border-top: #fff !important;
}

/deep/ .el-collapse-item__wrap {
  border-bottom: #fff !important;
  border-top: #fff !important;
}

.img-w {
  width: 30%;
  max-height: 250px;
  min-height: 100px;
  border: 1px solid #ccc;
  margin: 5px;
}

.istop {
  margin-top: 10px !important;
}

.center-w {
  border: 1px solid rgba(89, 98, 116, 0.3);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  width: 100%;
  height: 653px;
  display: flex;
  overflow-y: scroll;
}

.right-w {
  // flex: 6;
  width: 55%;
  overflow-y: scroll;
  position: relative;
}

.left-w {
  // flex: 5;
  width: 45%;
  flex-direction: column;
  border-right: 1px solid #ccc;
  overflow-y: scroll;
  padding: 10px 32px;
}
.order_state {
  border-radius: 1px;
  color: rgb(255, 255, 255);
  font-family: 思源黑体;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 22px;
  background: rgb(71, 170, 60);
}
.wait {
  background-color: #47aa3c;
  cursor: pointer;
}
.pass {
  background-color: #71e2a3;
}
.def {
  display: none;
}

.left-c {
  display: flex;
  /* padding-bottom: 13px; */
  min-height: 37px;
  /* line-height: 30px; */
  line-height: 37px;
  border-bottom: 1px solid #eee;
  .item {
    width: 50%;
    display: flex;
  }
}

.name {
  color: rgb(112, 86, 86);
  font-size: 14px;
  text-align: left;
  font-family: SourceHanSansSC-medium;
  font-weight: 700;
  min-width: 60px;
}

.mess {
  margin-left: 5px;
  color: rgba(140, 140, 140, 1);
  font-size: 14px;
  font-weight: 700;
  position: relative;
  .brand_list {
    position: absolute;
    width: 110%;
    height: 100px;
    top: 40px;
    background-color: #fff;
    border: 1px solid #dcdfe6;
    z-index: 99;
    padding-top: 5px;
    .brand_item {
      width: 100%;
      height: 34px;
      line-height: 34px;
      padding: 0 20px;
      box-sizing: border-box;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .brand_item:hover {
      cursor: pointer;
      background-color: #f5f7fa;
    }
  }
  .brand_list:before {
    width: 0px;
    height: 0px;
    position: absolute;
    top: -12px;
    left: 50px;
    padding: 0;
    border: 6px solid transparent;
    border-color: transparent transparent #fff transparent;
    content: "";
    z-index: 12;
  }
  .brand_list:after {
    width: 0px;
    height: 0px;
    position: absolute;
    top: -14px;
    left: 49px;
    padding: 0;
    border: 7px solid transparent;
    border-color: transparent transparent #ccc transparent;
    content: "";
    z-index: 10;
  }
}
.sel {
  /deep/ .el-icon-arrow-up {
    display: none;
  }
}

.table {
  // height: 600px;
  overflow-y: scroll;
}

.num {
  color: rgba(16, 16, 16, 1);
  font-size: 26px;
  font-weight: 700;
}

.img-x {
  display: flex;
  flex-wrap: wrap;
}

.img-s {
  width: 45%;
  margin: 5px;
  height: 300px;
}

.btns {
  display: flex;
  align-items: center;
  height: 60px;
  border-bottom: 2px solid #ccc;
  position: sticky;
  top: 0;
  background-color: #fff;
  width: 100%;
  z-index: 99;
  margin: auto !important;
}

/* .orderNo {
  background: url("http://applet.atptest.com/Ynuerhse1684894146291.png")
    no-repeat ;
  background-size: contain;
} */

.btns div {
  flex: 1;
  text-align: center;
  color: rgba(16, 16, 16, 1);
  font-size: 16px;
  height: 40px;
  line-height: 40px;
}

.btns div:first-child {
  border-right: 2px solid #ccc;
}

.active {
  color: rgba(65, 50, 192, 1) !important;
  font-weight: 700 !important;
}
.btn_item {
  border-right: 2px solid #cccccc;
}
.item_basic {
  cursor: pointer;
}

.actives {
  color: rgb(194, 51, 40) !important;
  /* font-weight: 700 !important; */
}

.list-center {
  overflow-y: scroll;
  height: 85%;
}

.head {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50%;
  margin-right: 13px;
  display: block;
}

.date {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
}

.mt-center {
}

.centers {
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.mess-list {
  display: flex;
  /* align-items: center; */
  margin-top: 26px;
  margin-left: 28px;
}

.el-tag {
  width: 100px;
}

.seed {
  padding: 20px;
  overflow-y: scroll;
  height: 82%;
}

.btn-add {
  margin: 10px 0;
}

.add-type {
  /* height: 400px; */
  border: 2px solid #ccc;
  margin-bottom: 20px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

.add-mess {
  display: flex;
  align-items: center;
  margin: 10px;
  /deep/ .el-upload-list--picture-card .el-upload-list__item-status-label {
    display: none;
  }
}

.add-name {
  min-width: 100px !important;
  text-align: right;
}

.add-mess div:last-child {
  width: 100%;
}

.btn-del {
  text-align: right;
  margin: 0 10px 10px 0;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.refresh {
  position: absolute;
  right: 50px;
  bottom: 50px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #888;
  font-size: 18px;
  text-align: center;
  line-height: 30px;
  color: #888;
  font-weight: bold;
}

.isrefresh {
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.conclusion {
  padding: 0 18px;
  padding-bottom: 30px;
  .conclusion_item {
    .item_title {
      color: rgb(0, 0, 0);
      font-family: 思源黑体;
      font-size: 14px;
      font-weight: 700;
      margin-top: 15px;
    }
    .item_content {
      margin-top: 10px;
      .item_li {
        display: flex;
        margin: 15px 0;
        .item_label {
          color: rgb(112, 86, 86);
          font-family: 思源黑体;
          font-size: 12px;
          font-weight: 700;
        }
        .item_state {
          margin-left: 20px;
          font-family: 思源黑体;
          font-size: 10px;
          font-weight: 700;
        }
        .item_text {
          font-family: 思源黑体;
          font-size: 12px;
          font-weight: 700;
        }
      }
      .explain_li {
        margin: 15px 0;
        .sel_container {
          margin: 10px 0;
          display: flex;
          align-items: center;
          color: rgb(67, 67, 67);
          font-family: 思源黑体;
          font-size: 10px;
          font-weight: 700;
          .pass_li {
            width: 76px;
            height: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid rgb(67, 67, 67);
            border-radius: 3px;
            background: rgb(255, 255, 255);
            cursor: pointer;
          }
          .fail_li {
            width: 76px;
            height: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid rgb(67, 67, 67);
            border-radius: 3px;
            background: rgb(255, 255, 255);
            margin-left: 13px;
            cursor: pointer;
          }
        }
        .explain_content {
          display: block;
          width: 550px;
          text-wrap: wrap;
          margin: 10px 0;
          color: #000;
        }
      }
    }
  }
  .handle_container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
    .conclusion_btn {
      width: 80px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      background: rgb(255, 107, 107);
      border-radius: 1px;
      color: #fff;
      font-family: 思源黑体;
      font-size: 12px;
      font-weight: 500;
      margin-left: 5px;
      cursor: pointer;
    }
  }
}
</style>
